import React, { Component } from 'react'
import style from "./main.module.css"; //引入css in js
import PropTypes from 'prop-types'; //引入


let stateObj = {
    // "state|1": ["Error", "Close", "Online", "Work"],
    "Error": "异常",
    "Close": "关闭",
    "Online": "已上线",
    "Work": "运行中"
}

export class Main extends Component {
    render() {
        const { list } = this.props;
        return (
            <div className='main'>
                <table>
                    <thead>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td>规则名称</td>
                            <td>描述</td>
                            <td>服务调用次数</td>
                            <td>状态</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            list.length ?
                            list.map(item => {
                                    return <tr key={item.id}>
                                        <td><input type="checkbox" /></td>
                                        <td>{item.name}</td>
                                        <td>{item.num}</td>
                                        <td className={style[item.state]} >{stateObj[item.state]}</td>
                                    </tr>
                                }) : "无数据"
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}

// 参数校验 
Main.propTypes = {
    list: PropTypes.array
};

// 参数默认值 
Main.defaultProps = {
    list: []
};

export default Main